<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
    />
    <van-empty v-if="cart.length === 0" description="快去选购商品吧">
      <van-button round type="danger" class="bottom-button" to="/home">选购商品</van-button>
    </van-empty>
    <template v-else>
      <van-swipe-cell v-for="item in cart" :key="item.id">
        <van-card
          :price="item.price"
          :title="item.title"
          class="goods-card"
        >
          <template #num>
            <van-stepper
              :value="item.amount"
              integer
              @change="updataCart({id: item.id, amount: $event})"
            />
          </template>
          <template #thumb>
            <van-checkbox
              :value="item.checked"
              @click="changeChecked({id: item.id})"
            />
            <div class="van-image" style="width: 100%; height: 100%; margin-left: 12px;">
              <img :src="item.url" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
        </van-card>
        <template #right>
          <van-button
            square text="删除"
            type="danger"
            class="delete-button"
            @click="deleteCart({id: item.id})"
          />
        </template>
      </van-swipe-cell>
    </template>
    <van-submit-bar :price="totalCartsPrice" button-text="提交订单">
      <van-checkbox
        :value="changeAllChecked"
        @click="checkAll({checked: !changeAllChecked})"
      >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['changeAllChecked', 'totalCartsPrice']),
    cart() {
      return this.$store.state.shoppingCart.cart
    },
  },
  methods: {
    ...mapMutations(['deleteCart', 'updataCart', 'changeChecked', 'checkAll']),
  },
}
</script>

<style lang="less" scoped>
    .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
  /deep/.van-card__thumb {
    display: flex;
    width: 100px;
  }
  /deep/.van-checkbox {
    overflow: visible;
  }

  main{
    position: relative;
    flex: 1;

    .van-submit-bar{
      position: absolute;
      bottom: 64px;
    }
  }
</style>
